<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page floats deferred by larger floats</title>
  <style>
    @page {
      size: 620px;
      margin: 10px;
    }
    :root {
      column-count: 2;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 20px;
      widows: 1;
      orphans: 1;
    }
    body {
      margin: 8px;
    }
    p {
      background: rgba(100, 100, 100, 0.2);
      border: blue dashed;
    }
    section {
      page-break-after: always;
    }
    .float {
      background: rgba(100, 100, 255, 0.2);
    }
    .top {
      float-reference: page;
      float: block-start;
      float: column-top;
      -ah-float: top column;
    }
    .bottom {
      float-reference: column;
      float: block-end;
      float: column-bottom;
      -ah-float: bottom column;
    }
  </style>
</head>
<body>
<section>
  <p>(1) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <div class="float bottom">
    (a) <b>This bottom column float should be on the 1st page.</b> Background of page floats is lightblue. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float.
  </div>
  <div class="float top">
    (b) <b>This top page float should be on the 2nd page.</b> Background of page floats is lightblue. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float.
  </div>
  <p>(2) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <p>(3) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <p>(4) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <p>(5) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
</section>
<section>
  <p>(6) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <div class="float bottom">
    (c) <b>This bottom column float should be on the 3rd page.</b> Background of page floats is lightblue. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float.
  </div>
  <p>(7) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <p>(8) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <p>(9) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
  <div class="float bottom">
    (d) <b>This bottom column float should be on the 4th page.</b> Background of page floats is lightblue. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float. This is a bottom column float.
  </div>
  <div class="float top">
    (e) <b>This top page float should be on the 5th page.</b> Background of page floats is lightblue. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float. This is a top page float.
  </div>
  <p>(10) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
</section>
</body>
</html>
